import { View } from "@tarojs/components";

import Card from "@/components/common/Card";
import ByText from "@/components/ui/ByText";

import ApiCrm from "@/api/crm";
import useFetch from "@/hooks/useFetch";
import { CustomerStatistic } from "@/types/customer";

const list = [
  { label: "资源", key: "draftCustomerCount", color: "warning" },
  { label: "意向", key: "intentCustomerCount", color: "error" },
  { label: "设计", key: "designCustomerCount", color: "primary" },
  { label: "施工", key: "constructionCustomerCount", color: "primary" },
  { label: "完工", key: "finishCustomerCount", color: "success" },
];

export default () => {
  // 统计
  const { data: statisticData } = useFetch<CustomerStatistic>(
    ApiCrm.customerStatistic
  );

  return (
    <Card className="m-3">
      <View className="mb-4">
        <ByText size="sm" type="second">
          我的项目
        </ByText>
        <ByText bold className="pl-4">
          {statisticData?.total}
        </ByText>
      </View>

      <View className="flex text-center -mx-4">
        {list.map((item) => (
          <View className="flex-1" key={item.key}>
            <ByText size="xl" bold type={item.color as any}>
              {statisticData?.[item.key]}
            </ByText>

            <ByText block className="mt-1" size="sm" type="second">
              {item.label}
            </ByText>
          </View>
        ))}
      </View>
    </Card>
  );
};
